<template>
	<sysJk :label="'9.湿式、干式自动喷水灭火系统工作压力和流量测试'" showBack :withoutTop="true" :leftTime="lefttime">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="w100" v-if="curnum==0">
					<view class="taskTit" style="width:100%;text-align: left;">
						<view class="tasklfex">
							<view>{{questions[curnum]}}</view>
							<view class="stepbs">
								<image :src="jd41" mode="heightFix" style="height: 2.5vh;"></image>
							</view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;">
						</image>
					</view>
					<view class="myCard">
						<view class="cardContent">
							<view class="answerview">
								<view class="ytitle">请进行工作压力及流量测试，读取压力及流量值</view>
								<view>
									<view> 请测试后，选择正确压力</view>
									<radio-group class="rflex" @change="aChange1">
										<label class="ritem" v-for="item,index in answer1" :key="index">
											<view>
												<radio :value="item" :checked="da1 === item"
													:style="{transform:'scale('+heightBl+')'}" />{{item}}
											</view>
										</label>
									</radio-group>
								</view>
								<view>
									<view> 请测试后，选择正确流量 </view>
									<radio-group @change="aChange2" class="rflex">
										<label class="ritem" v-for="item,index in answer2" :key="index">
											<view>
												<radio :value="item" :checked="da2 === item"
													:style="{transform:'scale('+heightBl+')'}" />{{item}}
											</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="handleBtn">
								<view class="handleBtn">
									<u-button v-if="examType==1"
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
										@click='explain(0)'>查看解析</u-button>

								</view>
							</view>

							<view class="btnA">
								<view v-if="isarea" class="areas">
									<view class="areasTit">场景选择</view>
									<view :class="curarea==0?'areaitem sitem':'areaitem'" @click="setarea(0)">水泵房(1)
										<image class="aimg" :src="area1"></image>
									</view>
									<view :class="curarea==1?'areaitem sitem':'areaitem'" @click="setarea(1)">水泵房(2)
										<image class="aimg" :src="area2"></image>
									</view>
								</view>
								<view class="btnArea">
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="send1()">下一步</u-button>
									<u-button @click="reset1()"
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="back()">返回</u-button>
								</view>
							</view>

							<!--第一小问相关-->
							<view v-if="isarea1" id="area11" :style="{ left:arar11openleft,top:arar11opentop}"
								@tap="openimgview('0',94)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isarea1" id="area12" :style="{ left:arar12openleft,top:arar12opentop}"
								@tap="openimgview('9-5',95)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isarea1" id="area13" :style="{ left:arar13openleft,top:arar13opentop}"
								@tap="openimgview('9-6',96)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isarea2" id="area21" :style="{ left:arar21openleft,top:arar21opentop}"
								@tap="openimgview('9-3',93)">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="isarea2" id="area22" class="openiv"
								:style="{ left:arar22openleft,top:arar22opentop}">
								<image class="openi" :src="openimg"></image>
							</view>
							<view v-if="is93" id="c93" class="openiv" :style="{ left:c93left,top:c93top}"
								@tap="openimgview('9-2',92)">
								<image class="openi" :src="closeimg"></image>
							</view>
							<view v-if="is94" id="c94" class="openiv" :style="{ left:c94left,top:c94top}"
								@tap="openimgview('9-1',91)">
								<image class="openi" :src="closeimg"></image>
							</view>
							<view v-if="is94" id="b94" class="openiv redbg"
								:style="{ left:b94left,top:b94top,width:b94w,height:b94h}"
								@tap="openimgview('9-4-1',94)">
							</view>


							<view v-if="is95" id="c95" class="openiv" :style="{ left:c95left,top:c95top}"
								@tap="openimgview('9-1',91)">
								<image class="openi" :src="closeimg"></image>
							</view>
							<view v-if="is96" id="c96" class="openiv" :style="{ left:c96left,top:c96top}"
								@tap="openimgview('9-1',91)">
								<image class="openi" :src="closeimg"></image>
							</view>

						</view>
					</view>

				</view>
				<view class="w100" v-if="curnum==1">
					<view class="taskTit" style="width:100%;text-align: left;">
						<view class="tasklfex">
							<view>{{questions[0]}}</view>
							<view class="stepbs">
								<image :src="jd42" mode="heightFix" style="height: 2.5vh;"></image>
							</view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;">
						</image>
					</view>
					<view class="myCard">
						<view class="cardContent">
							<view class="taskTit">
								{{questions[0]}}
							</view>

							<view class="answerview">
								<view class="ytitle">请停止消防水泵</view>

							</view>
							<view class="handleBtn">
								<u-button v-if="examType==1" color="green"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
									@tap='explain(0)'>查看解析</u-button>

							</view>

							<view class="btnA">
								<view v-if="isarea" class="areas">
									<view class="areasTit">场景选择</view>
									<view :class="curarea==0?'areaitem sitem':'areaitem'" @click="setarea(0)">
										<image class="aimg" :src="area1"></image>水泵房(1)
									</view>
									<view :class="curarea==1?'areaitem sitem':'areaitem'" @click="setarea(1)">
										<image class="aimg" :src="area2"></image>水泵房(2)
									</view>
								</view>
								<view class="btnArea">
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="send2()">下一步</u-button>
									<u-button @click="reset2()"
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="back()">返回</u-button>
								</view>
							</view>


							<!--第二小问相关 请停止消防水泵  场景1没有，场景2柜子开-->
							<!--打开柜子-->
							<view v-if="isa2area2" id="a2area21" class="openiv"
								:style="{ left:	a2area21left ,top:a2area21top}" @tap="openimgview('9-8',98)">
								<image class="openi" :src="openimg"></image>
							</view>


							<view v-if="is98" id="a2area981" class="openiv" :style="{ left:	b98cleft ,top:b98ctop }"
								@tap="openimgview('9-2',292)">
								<image class="openi" :src="closeimg"></image>
							</view>

							<!--手自切换-->
							<view v-if="is98" id="a2area981" class="openiv redbg"
								:style="{ left:	b981left ,top:b981top ,width:b981w,height:b981h}" @tap="atom()">
							</view>
							<!--1泵停止-->
							<view v-if="is98" id="a2area982" class="openiv redbg"
								:style="{ left:	 b982left ,top: b982top,width:b982w,height:b982h}" @tap="stop1()">
							</view>
							<!--变化1-->
							<view v-if="is981  && is98 " id="a2icon4" class="openiv"
								:style="{ left:icon4l,top:icont1 ,width:iconw,height:iconh}">
								<image class="aimg openiv" :src="greenimg1"
									:style="{ left:icon4l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="is981 && is98 " id="a2icon5" class="openiv"
								:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="greenimg2"
									:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="is981  && is98 " id="a2icon6" class="openiv"
								:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="greenimg2"
									:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>

							<!--变化2-->
							<view v-if="is982  && is98 " id="a2icon8" class="openiv"
								:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="redimg2"
									:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="is982  && is98 " id="a2icon12" class="openiv"
								:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="redimg2"
									:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}"></image>
							</view>



						</view>
					</view>
				</view>

				<view class="w100" v-if="curnum==2">
					<view class="taskTit">

						<view class="tasklfex">
							<view>{{questions[0]}}</view>
							<view class="stepbs">
								<image :src="jd43" mode="heightFix" style="height: 2.5vh;"></image>
							</view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;">
						</image>
					</view>
					<view class="myCard">
						<view class="cardContent">


							<view class="answerview">
								<view class="ytitle">请复位阀门</view>

							</view>
							<view class="handleBtn">
								<u-button v-if="examType==1" color="green"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@tap='explain(0)'>查看解析</u-button>

							</view>

							<view class="btnA">
								<view v-if="isarea" class="areas">

									<view class="areasTit">场景选择</view>
									<view :class="curarea==0?'areaitem sitem':'areaitem'" @click="setarea(0)">
										<image class="aimg" :src="area1"></image>水泵房(1)
									</view>
									<view :class="curarea==1?'areaitem sitem':'areaitem'" @click="setarea(1)">
										<image class="aimg" :src="area2"></image>水泵房(2)
									</view>
								</view>
								<view class="btnArea">
									<view class="btnArea">
										<u-button
											:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
											@click="send3()">下一步</u-button>
										<u-button @click="reset3()"
											:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
										<u-button
											:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
											@click="back()">返回</u-button>
									</view>
								</view>
							</view>


							<!--第三小问相关 请复位阀门-->

							<view v-if="isa3area1" id="area394" class="openiv"
								:style="{ left:arar11openleft,top:arar11opentop}" @tap="openimgview('9-4',394)">
								<image class="openi" :src="openimg"></image>
							</view>


							<view v-if="isa3area2" id="area393" class="openiv"
								:style="{ left:arar21openleft,top:arar21opentop}">
								<image class="openi" :src="openimg"></image>
							</view>

							<view v-if="isa3area2" id="area3932" class="openiv"
								:style="{ left:arar22openleft,top:arar22opentop}">
								<image class="openi" :src="openimg"></image>
							</view>


							<view v-if="is394" id="b94" class="openiv"
								:style="{ left:b94left,top:b94top,width:b94w,height:b94h}"
								@tap="openimgview('9-4-1',394)">
							</view>
							<view v-if="is394" id="c94" class="openiv" :style="{ left:c94left,top:c94top}"
								@tap="openimgview('9-1',393)">
								<image class="openi" :src="closeimg"></image>
							</view>
							<!--第三小问相关 请复位消防泵组电气控制柜-->
						</view>
					</view>
				</view>

				<view class="w100" v-if="curnum==3">
					<view class="taskTit">
						<view class="tasklfex">
							<view>{{questions[0]}}</view>
							<view class="stepbs">
								<image :src="jd44" mode="heightFix" style="height: 2.5vh;"></image>
							</view>
						</view>
					</view>
					<view class="imgview" :style="{height:'calc(100vh - '+tH+'px)'}">
						<image :src="bUrl" style="width:100%;height:100%;position:absolute;top:0;z-index: 0;">
						</image>
					</view>
					<view class="myCard">
						<view class="cardContent">
							<view class="answerview">
								<view class="ytitle">请复位消防泵组电气控制柜</view>

							</view>
							<view class="handleBtn">
								<u-button v-if="examType==1" color="green"
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
									@click='explain(0)'>查看解析</u-button>

							</view>

							<view class="btnA">
								<view v-if="isarea" class="areas">

									<view class="areasTit">场景选择</view>
									<view :class="curarea==0?'areaitem sitem':'areaitem'" @click="setarea(0)">
										<image class="aimg" :src="area1"></image>水泵房(1)
									</view>
									<view :class="curarea==1?'areaitem sitem':'areaitem'" @click="setarea(1)">
										<image class="aimg" :src="area2"></image>水泵房(2)
									</view>
								</view>
								<view class="btnArea">
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="send4()">提交</u-button>
									<u-button color="#1E90FF" @click="reset4()"
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}">重做</u-button>
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="back()">返回</u-button>
								</view>
							</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop}"
								@tap="showDialog">
							</view>


							<!--第三小问相关 请复位消防泵组电气控制柜-->
							<view v-if="isa4area92" id="a2area21" class="openiv"
								:style="{ left:	a2area21left ,top:a2area21top}" @tap="openimgview('9-8',498)">
								<image class="openi" :src="openimg"></image>
							</view>

							<view v-if="is498" id="a2area981" class="openiv" :style="{ left:	b98cleft ,top:b98ctop }"
								@tap="openimgview('9-2',492)">
								<image class="openi" :src="closeimg"></image>
							</view>

							<!--手自切换-->
							<view v-if="is498" id="a2area981" class="openiv redbg"
								:style="{ left:	b981left ,top:b981top ,width:b981w,height:b981h}" @tap="fwatom()">
							</view>
							<!--1泵停止-->
							<view v-if="is498" id="a2area982" class="openiv redbg"
								:style="{ left:	 b982left ,top: b982top,width:b982w,height:b982h}">
							</view>
							<!--变化1-->
							<view v-if="is984  && is498 " id="a2icon4" class="openiv"
								:style="{ left:icon4l,top:icont1 ,width:iconw,height:iconh}">
								<image class="aimg openiv" :src="greenimg1"
									:style="{ left:icon4l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="is984 && is498 " id="a2icon5" class="openiv"
								:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="greenimg2"
									:style="{ left:icon5l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="is984  && is498 " id="a2icon6" class="openiv"
								:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="greenimg2"
									:style="{ left:icon6l,top:icont1 ,width:iconw,height:iconh}"></image>
							</view>
							<!--变化2-->
							<view v-if="  is498 " id="a2icon8" class="openiv"
								:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="redimg2"
									:style="{ left:icon8l,top:icont2 ,width:iconw,height:iconh}"></image>
							</view>
							<view v-if="  is498 " id="a2icon12" class="openiv"
								:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}">

								<image class="aimg openiv" :src="backimg"
									:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}"></image>
								<image class="aimg openiv" :src="redimg2"
									:style="{ left:icon12l,top:icont2 ,width:iconw,height:iconh}"></image>
							</view>

						</view>
					</view>
				</view>

				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:200px;height:200px;background: #fff;">12345</view>
					</view>
				</u-mask>

				<u-mask :show="isexplain" @click="closeex" >
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block"
							style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle" style="color: #000;">
								【试题解析】 正确答案
							</view>
							<view class="overtitle" style="color: #000;">
								<text>{{explaintext}}</text>
							</view>
						</view>
					</view>
				</u-mask>



			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	import {
		formatTime
	} from '@/util/index.js'
	export default {
		components: {
			sysJk
		},

		data() {
			const app = getApp();
			const baseUrl = app.globalData.requestUrl;
			return {
				widthBl: 0,
				heightBl: 0,
				lefttime: '300',
				examId: '',
				examType: 1,
				base: baseUrl,
				writeBox: null,
				writeBoxLeft: 0,
				writeBoxTop: 0,
				showFlag: false,
				bUrl: baseUrl + "/static/image/wb/9-1.jpg",
				openimg: baseUrl + "/static/image/open.png",
				closeimg: baseUrl + "/static/image/close.png",

				j1: baseUrl + "/static/image/jd/j1-1.png",

				redimg1: baseUrl + "/static/image/red.png", //实心
				redimg2: baseUrl + "/static/image/red2.png", //圈
				greenimg1: baseUrl + "/static/image/liang.png", //实心
				greenimg2: baseUrl + "/static/image/10-3-2.png", //圈
				backimg: baseUrl + "/static/image/back_.png", //黑的，档圈用

				is95op: false,
				is96op: false,


				curarea: 0, //当前场景
				questionsnum: 1, //题目数


				isarea: true,
				curnum: 0, //当前题目
				area1: baseUrl + "/static/image/wb/9-1.jpg",
				area2: baseUrl + "/static/image/wb/9-2.jpg",
				questions: ['【1/1】请进行自动喷水灭火系统工作压力主流量测试，并进行复位操作'],


				jd41: baseUrl + "/static/image/jd/j1-1.png",
				jd42: baseUrl + "/static/image/jd/j1-2.png",
				jd43: baseUrl + "/static/image/jd/j1-3.png",
				jd44: baseUrl + "/static/image/jd/j1-4.png",
				//请停止消防水泵
				//请复位阀门
				//请复位消防泵组电气控制柜
				answer1: ['0.8MPa', '0.7MPa', '0.6MPa', '1.2MPa'],

				answer2: ['20l/s', '60l/s', '10l/s', '80l/s'],



				isarea1: true,
				isarea2: false,
				arar11openleft: 0,
				arar11opentop: 0,
				arar12openleft: 0,
				arar12opentop: 0,
				arar13openleft: 0,
				arar13opentop: 0,
				arar21openleft: 0,
				arar21opentop: 0,
				arar22openleft: 0,
				arar22opentop: 0,






				is93: false,
				is94: false,

				is95: false,
				is96: false,
				c93left: 0,
				c93top: 0,
				c94left: 0,
				c94top: 0,
				b94left: 0, //810
				b94top: 0, //500
				b94w: 0, //192
				b94h: 0, //118

				c95left: 0,
				c95top: 0,
				c96left: 0,
				c96top: 0,

				//2answ
				isa2area2: false,
				a2area21left: 0,
				a2area21top: 0,

				is98: false,
				//9-8 两个按钮，两个图
				is981: false,
				is982: false,
				//is984
				is984: true,
				b98cleft: 1530,
				b98ctop: 150,

				//手自按钮
				bxb1l: 1365,
				bxb1t: 287,
				bxb1w: 74,
				bxb1h: 88,
				//1泵停止
				bxb2l: 1170,
				bxb2t: 420,
				bxb2w: 74,
				bxb2h: 88,

				//图标，上下两组
				iconw: 63,
				iconh: 63,
				icon1l: 567,
				icon2l: 651,
				icon3l: 735,
				icon4l: 809,
				icon5l: 893,
				icon6l: 967,
				icon7l: 1041,
				icont1: 108,

				icont2: 546,
				icon8l: 646,
				icon9l: 714,
				icon10l: 790,
				icon11l: 872,
				icon12l: 965,



				//b1
				b981left: 1364,
				b981top: 295,
				b981w: 68,
				b981h: 78,

				is394: false,

				is394close: false,

				isa4area92: false,
				is498: false,



				//b2
				b982left: 1170,
				b982top: 422,
				b982w: 64,
				b982h: 86,

				//	i1
				i981left: 816,
				i981top: 112,
				i981w: 60,
				i981h: 60,


				//i2

				i982left: 896,
				i982top: 110,
				i982w: 60,
				i982h: 60,
				//3
				isa3area2: false,
				isa3area1: false,

				innerAudioContext: uni.createInnerAudioContext(),
				jb: baseUrl + "/static/image/jb.MP3",
				quest: {
					fz_id: 2,
					title: '',
					no: "",
					question_type: 1,
					user_answer: '',
					answer: '',
					is_correct: '',
					score: '',
					start_time: 0,
					end_time: 0,
					question_answer: ''
				},
				explainarr: ['在水泵房1中打开测试阀，再点压力表，再看流量计，直接读取答案。下一步后去水泵房2，控制柜转手动，点停泵。下一步直接关闭测试阀。\r\n\r\n正确答案：0.7MPa  60l/s'],
				isexplain: false,
				explaintext: '',
				tH: 0,

				da1: '',
				da2: '',
				step1score: 0,
				step2score: 0,
				step3score: 0,
				step4score: 0,
				score: 0,
			}


		},
		onLoad(options) {
			uni.setScreenBrightness({
				keepScreenOn: true,
				direction: 'landscape',
				success() {
					console.log("a")
				}
			})
			let that = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		console.log(res)
			// 		// uni.setStorageSync('titleHeight',res.statusBarHeight+capsuleH)
			// 		that.tH = uni.getMenuButtonBoundingClientRect().height + uni
			// 			.getMenuButtonBoundingClientRect().top * 2 + 21
			// 		//that.tH=85 
			// 		that.drawWhiteBox()
			// 	}
			// });
			this.examId = options.examId
			this.examType = options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('.imgview')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onReady() {
			uni.setScreenBrightness({
				keepScreenOn: true,
				direction: 'landscape',
				success() {
					console.log("a")
				}
			})
			let that = this;
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					// uni.setStorageSync('titleHeight',res.statusBarHeight+capsuleH)
					that.tH = uni.getMenuButtonBoundingClientRect().height + uni
						.getMenuButtonBoundingClientRect().top * 2 + 21
					//that.tH=85
					that.drawWhiteBox()
				}
			});
			// #endif
			// #ifdef APP-PLUS
			let sy = uni.getSystemInfoSync()
			this.pT = sy.statusBarHeight
			this.tH = sy.statusBarHeight + 51
			that.drawWhiteBox(this.tH)

			// #endif
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			explain(id) {
				this.isexplain = true;
				this.explaintext = this.explainarr[id]
			},
			closeex() {
				this.isexplain = false
			},
			atom() {
				console.log("ato")
				//5,6 变圈
				//4变实心
				this.is981 = true
			},

			aChange1(e) {
				this.da1 = e.detail.value
			},
			aChange2(e) {
				this.da2 = e.detail.value
			},
			fwatom() {
				//复位上面的
				this.is984 = false
			},

			stop1() {
				console.log("ato")
				//8 12 变圈
				if (this.is981) {
					this.is982 = true
				}
			},
			reset() {
				this.is95op = false
				this.is96op = false
				this.curarea = 0 //当前场景
				this.questionsnum = 1 //题目数 
				this.isarea = true
				this.isarea1 = true
				this.isarea2 = false
				this.is93 = false
				this.is94 = false
				this.is95 = false
				this.is96 = false
				this.isa2area2 = false
				this.is98 = false
				//9-8 两个按钮，两个图

				this.is981 = false
				this.is982 = false
				//is984
				this.is984 = true
				this.is394 = false
				this.is394close = false
				this.isa4area92 = false
				this.is498 = false
				this.isa3area2 = false
				this.isa3area1 = false
			},
			reset1() {
				this.reset()
				let that = this
				that.is95op = false
				that.da1 = ""
				that.da2 = ""
				that.curnum = 0
				that.curarea = 0
				that.setarea(0)


			},
			reset2() {
				this.reset()
				let that = this
				that.is98 = false
				that.is982 = false
				that.curnum = 1
				that.isarea = true
				that.curarea = 0
				that.bUrl = that.base + "/static/image/wb/9-1.jpg"

				this.is981 = false
				this.is982 = false

			},
			reset3() {
				this.reset()
				let that = this
				that.curnum = 2
				that.isa3area1 = true;
				that.isarea = true
				that.curarea = 0
				that.bUrl = that.base + "/static/image/wb/9-1.jpg"

				that.is394close = false

			},
			reset4() {
				this.reset()
				let that = this
				that.curnum = 3
				that.isarea = true
				that.curarea = 0
				that.bUrl = that.base + "/static/image/wb/9-1.jpg"

				that.is984 = true
			},
			//第一步
			send1() {

				/**
				 * 	第一步请进行工作压力及流量测试，读取压力及流量值【1】
				请测试后，选择正确压力
				1.2/0.6/0.7/0.8MPa 
				请测试后，选择正确流量		
				
				80/10/20/60  L/s
				 */
				let that = this
				if (this.da1 == "") {
					uni.showToast({
						title: '请选择答案',
						icon: 'none'
					})
					return;
				}
				if (this.da2 == "") {
					uni.showToast({
						title: '请选择答案',
						icon: 'none'
					})
					return;
				}

				if (that.is95op && that.da1 == "0.7MPa" && that.da2 == "60l/s") {
					that.step1score = 1
				} else {
					that.step1score = 0
				}

				this.$showModal2({
					title: '确认提交？' + that.step1score,
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
					
							that.curnum = 1
							that.isarea = true
							that.curarea = 0
							that.bUrl = that.base + "/static/image/wb/9-1.jpg"
					
					
					
						
				});
			},
			send2() {
				let that = this
				/**
				 * 	第二步请停止消防水泵【0.5】
				 */
				if (this.is981 && this.is982) {
					that.step2score = 0.5
				}
				this.$showModal2({
					title: '确认提交？' + that.step2score,
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
					
							that.curnum = 2
							that.isa3area1 = true;
							that.isarea = true
							that.curarea = 0
							that.bUrl = that.base + "/static/image/wb/9-1.jpg"
					
						
				});

			},
			send3() {
				let that = this
				/**
				 * 	第三步请复位阀门【0.3】
				 */
				if (that.is394close) {
					that.step3score = 0.3
				}

				this.$showModal2({
					title: '确认提交？' + that.step3score,
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
				
							that.curnum = 3
							that.isarea = true
							that.curarea = 0
							that.bUrl = that.base + "/static/image/wb/9-1.jpg"
					
					
					
					
						
				});


			},

			send4() {
				let that = this

				/**
				 * 	第四步请复位泵组电气控制柜【0.2】
				 */
				if (that.is984 == false) {
					that.step4score = 0.2
				}
				let ss = that.step1score + that.step2score + that.step3score + that.step4score
				that.$showModal2({
					title: '确认提交？' + that.step4score,
					// content: '这是一个模态弹窗',
					
				}).then(( )=>{
				 
						 
							console.log("loge")
							fzQuestion(that.quest).then(res => {
								console.log("http")
								uni.hideLoading()
								let pages = getCurrentPages()
								if(pages.length==4){
									let prevPage = pages[pages.length - 3]
									prevPage.$vm.status9 = true 
									prevPage.$vm.addScore(ss)
									uni.navigateBack( )
								}else{
									let prevPage = pages[pages.length - 2]
									prevPage.$vm.status9 = true 
									prevPage.$vm.addScore(ss)
									uni.navigateBack( )
								}
									 
								
							})
						
				});

				/***
				
				9、湿式、干式自动喷水灭火系统工作压力和流量测试【2】
				场景
				水泵房（1）
				水泵房（2）
				【1/1】请进行自动喷水灭火系统工作压力主流量测试，并进行复位操作
				（分四步）
				
				
			
				【压力值和流量值答案分别有以上四种变化】
			
			
			
				
				score1 //请测试后，选择正确流量1
				score2 //第二步请停止消防水泵【0.5】
				score3 //第三步请复位阀门【0.3】
				score4  //第四步请复位泵组电气控制柜【0.2】
				score //总分 
				*/
			},

			//切换两个场景
			setarea(id) {
				this.curarea = id

				if (this.curnum == 0) {
					if (id == 0) {
						this.bUrl = this.base + "/static/image/wb/9-1.jpg"
						this.isarea1 = true
						this.isarea2 = false
					}

					if (id == 1) {
						this.isarea1 = false
						this.isarea2 = true
						this.bUrl = this.base + "/static/image/wb/9-2.jpg"
					}
				}
				if (this.curnum == 1) {
					if (id == 0) {
						this.bUrl = this.base + "/static/image/wb/9-1.jpg"
						this.isa2area2 = false
						this.isarea1 = false
						this.isarea2 = false
					}

					if (id == 1) {
						this.isa2area2 = true
						this.bUrl = this.base + "/static/image/wb/9-2.jpg"
					}
				}

				if (this.curnum == 2) {
					if (id == 0) {
						this.bUrl = this.base + "/static/image/wb/9-1.jpg"
						this.isa3area1 = true;
						this.isa3area2 = false
					}

					if (id == 1) {
						this.isa3area2 = true
						this.isa3area1 = false
						this.bUrl = this.base + "/static/image/wb/9-2.jpg"
					}
				}
				if (this.curnum == 3) {
					if (id == 0) {
						this.bUrl = this.base + "/static/image/wb/9-1.jpg"
						this.isa4area92 = false
					}

					if (id == 1) {
						this.isa4area92 = true

						this.bUrl = this.base + "/static/image/wb/9-2.jpg"
					}
				}

			},
			//打开新的图片
			openimgview(path, lb) {
				this.bUrl = this.base + "/static/image/wb/" + path + ".jpg";
				//关闭场景的开关
				this.isarea1 = false
				this.isarea2 = false
				this.isarea = false
				switch (lb) {
					case 91:
						this.isarea1 = true
						this.is94 = false

						this.is95 = false
						this.is96 = false
						this.isarea = true
						break;
					case 92:
						this.isarea2 = true
						this.is93 = false
						this.isarea = true

						break;
					case 292:
						this.isa2area2 = true
						this.is98 = false
						this.isarea = true

						break;
					case 93:
						this.is93 = true;
						break;
					case 94:
						//94 941 切换 //
						this.is94 = true;
						if (path != '0') {
							this.is95op = !this.is95op
							this.is96op = !this.is96op
						}
						if (this.is95op) {
							this.bUrl = this.base + "/static/image/wb/" + "9-4" + ".jpg";
						}
						if (!this.is95op) {

							this.bUrl = this.base + "/static/image/wb/" + "9-4-1" + ".jpg";
						}
						break;
					case 95:
						this.is95 = true;
						console.log(this.is95op)
						if (this.is95op) {
							this.bUrl = this.base + "/static/image/wb/" + "9-5" + ".jpg";
						}
						if (!this.is95op) {
							this.bUrl = this.base + "/static/image/wb/" + "9-5-1" + ".jpg";
						}
						//这里判断是否操作过
						//	9-5-1  //0
						//9-5 // 

						break;
					case 96:
						this.is96 = true;
						//判断是否操作过
						//9-6-1 //0
						//9-6  
						if (this.is96op) {
							this.bUrl = this.base + "/static/image/wb/" + "9-6" + ".jpg";
						}
						if (!this.is96op) {
							this.bUrl = this.base + "/static/image/wb/" + "9-6-1" + ".jpg";
						}
						break;
					case 98:
						//打开按钮钮
						this.isa2area2 = false
						this.is98 = true;
						this.isa2area2 = false;
						this.isarea = false
						break;

					case 393:
						this.isarea = true
						this.isa3area1 = true
						this.is394 = false;
						break;
					case 394:
						this.is394 = true
						this.isa3area1 = false
						this.isa3area2 = false
						if (path == "9-4-1") {
							this.is394close = true
						}
						if (this.is394close) {
							this.bUrl = this.base + "/static/image/wb/" + "9-4-1" + ".jpg";
						} else {
							this.bUrl = this.base + "/static/image/wb/" + "9-4" + ".jpg";
						}
						break;
					case 492:
						this.isa4area92 = true

						this.is498 = false
						break;
					case 498:
						this.isa4area92 = false

						this.is498 = true
						break;
				}

			},



			showDialog() {
				this.showFlag = true
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox(statusnum) {
				let that = this
				let warp = uni.createSelectorQuery().in(this).select('.imgview')

				warp.boundingClientRect(data => {
					console.log(that.tH)
					console.log(data)
					console.log(data.width)
					console.log(data.height)
					//有些设备取的是设备高度 data.height


					let widthBl = data.width / 1920
					let sy = uni.getSystemInfoSync()
					let heightBl = 0
					// if (data.height = sy.screenHeight) {
					// 	heightBl = (data.height - that.tH) / 921
					// } else {
					// 	heightBl = (data.height) / 921
					// }
					heightBl = (data.height - that.tH) / 921
					that.widthBl = widthBl
					that.heightBl = heightBl
					//房1 					
					that.arar11openleft = 830 * widthBl + 'px'
					that.arar11opentop = 370 * heightBl + statusnum + 'px'

					that.arar12openleft = 910 * widthBl + 'px'
					that.arar12opentop = 215 * heightBl + statusnum + 'px'



					that.arar13openleft = 1055 * widthBl + 'px'
					that.arar13opentop = 385 * heightBl + statusnum + 'px'

					//房2



					that.arar21openleft = 630 * widthBl + 'px'
					that.arar21opentop = 545 * heightBl + statusnum + 'px'


					that.arar22openleft = 675 * widthBl + 'px'
					that.arar22opentop = 670 * heightBl + statusnum + 'px'


					//9-3 一个关 
					that.c93left = 1350 * widthBl + 'px'
					that.c93top = 240 * heightBl + statusnum + 'px'

					//9-4 变9-4-1

					//9-4  9-4-1 关

					that.c94left = 1300 * widthBl + 'px'
					that.c94top = 240 * heightBl + statusnum + 'px'


					that.b94left = 790 * widthBl + 'px'
					that.b94top = 295 * heightBl + statusnum + 'px' //445
					that.b94w = 220 * widthBl + 'px'
					that.b94h = 280 * heightBl + 'px' //160

					//9-5 关


					that.c95left = 960 * widthBl + 'px'
					that.c95top = 550 * heightBl + statusnum + 'px'

					//9-6 关 
					that.c96left = 1200 * widthBl + 'px'
					that.c96top = 190 * heightBl + statusnum + 'px'


					//9-9 开 9-13
					//1400
					//640

					//9-13

					//第二小问
					that.a2area21left = 1390 * widthBl + 'px'
					that.a2area21top = 580 * heightBl + statusnum + 'px'

					//9-8
					that.b98cleft = 1530 * widthBl + 'px'
					that.b98ctop = 120 * heightBl + statusnum + 'px'

					//手自切换
					that.b981left = 1364 * widthBl + 'px'
					that.b981top = 285 * heightBl + statusnum + 'px'
					that.b981w = 68 * widthBl + 'px'
					that.b981h = 78 * heightBl + 'px'

					//b2
					that.b982left = 1170 * widthBl + 'px'
					that.b982top = 420 * heightBl + statusnum + 'px'
					that.b982w = 64 * widthBl + 'px'
					that.b982h = 86 * heightBl + 'px'

					//	i1
					that.i981left = 816 * widthBl + 'px'
					that.i981top = 110 * heightBl + statusnum + 'px'
					that.i981w = 60 * widthBl + 'px'
					that.i981h = 60 * heightBl + 'px'
					//i2 
					that.i982left = 896 * widthBl + 'px'
					that.i982top = 110 * heightBl + statusnum + 'px'
					that.i982w = 60 * widthBl + 'px'
					that.i982h = 60 * heightBl + 'px'


					////
					//手自按钮
					that.bxb1l = 1365 * widthBl + 'px'
					that.bxb1t = 287 * heightBl + statusnum + 'px'
					that.bxb1w = 74 * widthBl + 'px'
					that.bxb1h = 88 * heightBl + statusnum + 'px'
					//1泵停止
					that.bxb2l = 1170 * widthBl + 'px'
					that.bxb2t = 420 * heightBl + statusnum + 'px'
					that.bxb2w = 74 * widthBl + 'px'
					that.bxb2h = 88 * heightBl + statusnum + 'px'

					//图标，上下两组
					that.iconw = 63 * widthBl + 'px'
					that.iconh = 63 * heightBl + 'px'
					that.icon1l = 567 * widthBl + 'px'
					that.icon2l = 651 * widthBl + 'px'
					that.icon3l = 735 * widthBl + 'px'
					that.icon4l = 809 * widthBl + 'px'
					that.icon5l = 893 * widthBl + 'px'
					that.icon6l = 967 * widthBl + 'px'
					that.icon7l = 1041 * widthBl + 'px'

					that.icont1 = 108 * heightBl + statusnum + 'px'


					that.icont2 = 546 * heightBl + statusnum + 'px'
					that.icon8l = 646 * widthBl + 'px'
					that.icon9l = 714 * widthBl + 'px'
					that.icon10l = 790 * widthBl + 'px'
					that.icon11l = 872 * widthBl + 'px'
					that.icon12l = 965 * widthBl + 'px'

				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			}
		}
	}
</script>


<style scoped lang="scss">
	.imgview {
		position: relative;
		width: 100%;

	}

	.rem7 {
		font-size: 0.7rem;
	}

	.rflex {
		display: flex;
		flex-wrap: wrap;
	}

	.explaincss {
		padding: 20rpx;
		width: 300rpx;

		border-radius: 20rpx;
		border: 1rpx solid #000;
		background-color: #fff;
		color: #000;
		position: fixed;
		top: 50rpx;
		left: 225rpx;
		z-index: 5000;
	}

	.tasklfex {
		display: flex;
		justify-content: space-between;
	}



	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.w100 {
			width: 100%;
			height: 100%;
		}

		#area11 {
			position: fixed;
		}


		#area12 {
			position: fixed;
		}

		#area13 {
			position: fixed;
		}

		#area21 {
			position: fixed;
		}

		#area22 {
			position: fixed;
		}

		#c93 {
			position: fixed;
		}

		#c94 {
			position: fixed;
		}

		#c95 {
			position: fixed;
		}

		#c96 {
			position: fixed;
		}

		#a2area21 {
			position: fixed;
		}

		.aimg {
			width: 60rpx;
			height: 35rpx;
		}

		.answerview {
			position: fixed;
			font-size: 2vh;
			bottom: 45rpx;
			left: 40rpx;
			background-color: #ffffff;
			color: #000;
			width: 200rpx;
		}

		.ytitle {
			background-color: #ffb700;
			line-height: 20rpx;
		}

		.ritem {
			line-height: 20rpx;
			width: 100rpx;
		}

		.openiv {
			position: fixed;
		}

		.redbg {}

		.openi {
			width: 20px;
			height: 20px;
		}

		.tasklfex {
			display: flex;
			justify-content: space-between;
		}

		.stepbs {
			text-align: right;

		}

.taskTit {
					height: 21px;line-height: 21px;width: 100%;text-align: left;background: #fff;color: #000;font-size: 15px
				}
		.myCard {
			width: 100%;
			// height:100%;
			position: relative;
			// border-radius: 20rpx;
			//overflow: hidden;
			z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				


				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 0px;
				}

				.btnA {
					display: flex;
					flex-direction: column;
					position: fixed;
					right: 30px;
					bottom: 0px;
					align-items: flex-end;
				}

				.areas {
					// background-color: rgba(255, 165, 0, 0.2);
					margin-bottom: 10px;
					.areasTit{
						background: orange;
					}
					color: #000;
				}
				
				.sitem {
					border: 2rpx solid red;
				}
				
				.areaitem {
					background: #fff;
				
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.sitem {
					border: 2rpx solid orange;
				}

				.areaitem {
					background: #fff;

					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.btnArea {
					//	margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					//	position: fixed;
					//	right: 30px;
					//	bottom: 30px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			border: none;
			width: 0px;
			height: 0px;
			position: fixed
		}
	}
</style>